import React, {FC} from "react"
import {Typography, Box, Stack, Divider} from "@mui/material";
import {styled, useTheme} from "@mui/material/styles";
import {pxToRem} from "../../theme/typography";

const Wrapper = styled('div')(({theme}) => ({
  padding: theme.spacing(2),
  display: "flex",
  justifyContent: "space-between",
  // borderBottom: "1px solid #f2f2f2"
}))

const MyDivider = styled(Divider)(({theme}) => ({
  marginLeft: theme.spacing(2),
}))

const ArticleMainImage = styled('img')(({theme}) => ({
  objectFit: "cover",
  marginLeft: theme.spacing(2),
  borderRadius: theme.shape.borderRadius
}))

interface IArticleMainImageProps {
  isLast: boolean
}

const ArticleItem: FC<IArticleMainImageProps> = (props) => {
  const theme = useTheme()
  return (<>
    <Wrapper>
      <Stack
        justifyContent="space-between"
      >
        <Box>
          <Typography variant="h6" sx={{
            display: '-webkit-box',
            overflow: 'hidden',
            WebkitBoxOrient: 'vertical',
            WebkitLineClamp: 1,
            lineHeight: 1.2,
            height: pxToRem(17 * 1.2),
            marginBottom: "4px"
          }}>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae blanditiis distinctio earum fuga id
            incidunt,
            inventore itaque libero quod similique. A dolor eius esse! Impedit magni neque quos reiciendis unde?
          </Typography>

          <Typography variant="body2" sx={{
            display: '-webkit-box',
            overflow: 'hidden',
            WebkitBoxOrient: 'vertical',
            WebkitLineClamp: 2,
            lineHeight: 1.2,
            height: pxToRem(14 * 2 * 1.2),
          }}>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae blanditiis distinctio earum fuga id
            incidunt,
            inventore itaque libero quod similique. A dolor eius esse! Impedit magni neque quos reiciendis unde?
          </Typography>
        </Box>


        <Stack
          direction="row"
          justifyContent="space-between"
          alignItems="center"
          sx={{
            color: "#666"
          }}
        >
          <Stack
            direction="row"
            alignItems="center"
            spacing={1}
          >
            <img className="rounded-circle aspect-fill" alt="avatar" width={30} height={30}
                 src="/static/mock-images/article-main-picture/6.jpeg"/>

            <Typography variant="body2">
              <strong style={{cursor: "pointer", color: theme.palette.primary.main}}>Felix</strong>&nbsp;•&nbsp;
              <Box component="span" sx={{
                display: {
                  xs: 'none',
                  sm: "inline"
                }
              }}>
                2022-
              </Box> 04-23 &nbsp;10:22
            </Typography>
          </Stack>

          <Stack
            direction="row"
            spacing={2}
            sx={{
              display: {
                xs: 'none',
                sm: "flex"
              }
            }}>
            <Stack
              direction="row"
              alignItems="center"
              spacing={1}
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                   viewBox="0 0 16 16">
                <path
                  d="M6.956 1.745C7.021.81 7.908.087 8.864.325l.261.066c.463.116.874.456 1.012.965.22.816.533 2.511.062 4.51a9.84 9.84 0 0 1 .443-.051c.713-.065 1.669-.072 2.516.21.518.173.994.681 1.2 1.273.184.532.16 1.162-.234 1.733.058.119.103.242.138.363.077.27.113.567.113.856 0 .289-.036.586-.113.856-.039.135-.09.273-.16.404.169.387.107.819-.003 1.148a3.163 3.163 0 0 1-.488.901c.054.152.076.312.076.465 0 .305-.089.625-.253.912C13.1 15.522 12.437 16 11.5 16H8c-.605 0-1.07-.081-1.466-.218a4.82 4.82 0 0 1-.97-.484l-.048-.03c-.504-.307-.999-.609-2.068-.722C2.682 14.464 2 13.846 2 13V9c0-.85.685-1.432 1.357-1.615.849-.232 1.574-.787 2.132-1.41.56-.627.914-1.28 1.039-1.639.199-.575.356-1.539.428-2.59z"/>
              </svg>
              <Typography variant="body2">21</Typography>
            </Stack>


            <Stack
              direction="row"
              alignItems="center"
              spacing={1}
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                   viewBox="0 0 16 16">
                <path
                  d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.5a1 1 0 0 0-.8.4l-1.9 2.533a1 1 0 0 1-1.6 0L5.3 12.4a1 1 0 0 0-.8-.4H2a2 2 0 0 1-2-2V2zm5 4a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm4 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
              </svg>
              <Typography variant="body2">2</Typography>
            </Stack>

            <Stack
              direction="row"
              alignItems="center"
              spacing={1}
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"
                   viewBox="0 0 16 16">
                <path
                  d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z"/>
              </svg>
              <Typography variant="body2">102</Typography>
            </Stack>

          </Stack>
        </Stack>
      </Stack>

      <ArticleMainImage src="/static/mock-images/article-main-picture/6.jpeg" alt="article-main" width={130}
                        height={100}/>
    </Wrapper>
    {
      !props.isLast && <MyDivider/>
    }
  </>)
}

export default ArticleItem